<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <style>
        .skin {
            width : 100px;
            border : 1px solid gray;
            padding : 2px;
            visibility : hidden;
            position : absolute;
            z-index: 100;
            background: #ccc;
        }
        #nuBox{
          width: 800px;
          height: 400px;
          border: 1px solid black;
        }
        #menu{
        }

        :not(:root):-webkit-full-screen{
          background: #ccc !important;
        }

  </style>
</head>
<body>
  <div class="box" id="nuBox">
    <!-- <img id="img" onclick="toggleFullScreen(event);" src="http://www.shu800.com/imgh/4560.jpg" alt="图片"> -->
    <img id="img" src="http://www.shu800.com/imgh/4560.jpg" width="400px" height="200px" alt="图片">
  </div>
  <div>
    <button id="btn"  style="position:fixed;right:0;top:'200px';background-color: green">全屏</button>
  </div> 

    <!--自定义右键菜单html代码-->
  <div id="menu" class="skin">
      <div class="menuitems">
          退出全屏
      </div>
  </div>

  <script>
    // 鼠标右键事件
    // $(document).on('contextmenu',function(e){
    //   e.preventDefault();
    //   var menu = $('#menu');
    //   menu.css('left',e.offsetX + 'px');
    //   menu.css('top',e.offsetY + 'px');
    //   menu.css('visibility','visible');
    // })

    window.onresize = function(e){
      if(checkFull()){
        console.log('啊哈哈');
      //要执行的动作
      }
    }
    $(window).keydown(function (event) {
      if (event.keyCode == 27) {
      alert(1111)
      }
    });

    function checkFull(){
      var element = document.getElementById('nuBox');
      var isFull =  document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
      console.log(isFull);
      //to fix : false || undefined == undefined
      if(isFull === undefined) isFull = false;
      return isFull;
    }

 
    /**
     * 方法一
     * 
     */
    var btn = document.getElementById('btn');
    var imgbtn = document.getElementById('img');
    //给按钮绑定全屏按钮
    btn.onclick= function(){
      var element = document.getElementById('nuBox');
      fullScreen(element);
    }
    //给图片添加点击退出全屏模式
    // imgbtn.onclick = function(){
    //   fullExit(this);
    // }

    //全屏展示
    function fullScreen(element){
      //var element= document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
      if(window.ActiveXObject){
        var WsShell = new ActiveXObject('WScript.Shell');
        WsShell.SendKeys('{F1}');
      }else if(element.requestFullScreen){
        element.requestFullScreen();
      }//IE11
      else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
        //写全屏后的执行函数
      }
      // Webkit (works in Safari5.1 and Chrome 15)
      else if(element.webkitRequestFullScreen ) {
          element.webkitRequestFullScreen();
          //写全屏后的执行函数
      }
      // Firefox (works in nightly)
      else if(element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
          //写全屏后的执行函数
      }
    }


    //退出全屏
    function fullExit(element){
        //var element= document.documentElement;//若要全屏页面中div，var element= document.getElementById("divID");
        //IE ActiveXObject
        if (window.ActiveXObject)
        {
            var WsShell = new ActiveXObject('WScript.Shell');
            WsShell.SendKeys('{F11}');
            //写退出全屏后的执行函数
        }
        //HTML5 W3C 提议
        else if(element.requestFullScreen) {
            document.exitFullscreen();
            //写退出全屏后的执行函数
        }
        //IE 11
        else if(element.msRequestFullscreen) {
            document.msExitFullscreen();
            //写退出全屏后的执行函数
        }
        // Webkit (works in Safari5.1 and Chrome 15)
        else if(element.webkitRequestFullScreen ) {
            document.webkitCancelFullScreen();
            //写退出全屏后的执行函数
        }
        // Firefox (works in nightly)
        else if(element.mozRequestFullScreen) {
            document.mozCancelFullScreen();
            //写退出全屏后的执行函数
        }
    }

    //方法二
    // function FullScreen(el){
    //   var isFullscreen=document.fullScreen||document.mozFullScreen||document.webkitIsFullScreen;
    //   if(!isFullscreen){//进入全屏,多重短路表达式
    //     (el.requestFullscreen&&el.requestFullscreen())||
    //     (el.mozRequestFullScreen&&el.mozRequestFullScreen())||
    //     (el.webkitRequestFullscreen&&el.webkitRequestFullscreen())||(el.msRequestFullscreen&&el.msRequestFullscreen());

    //   }else{	//退出全屏,三目运算符
    //     document.exitFullscreen?document.exitFullscreen():
    //     document.mozCancelFullScreen?document.mozCancelFullScreen():
    //     document.webkitExitFullscreen?document.webkitExitFullscreen():'';
    //   }
    // }
    // function toggleFullScreen(e){
    //   var el=e.srcElement||e.target;//target兼容Firefox
    //   el.innerHTML=='点我全屏'?el.innerHTML='退出全屏':el.innerHTML='点我全屏';
    //   FullScreen(el);
    // }
  </script>
</body>
</html>